<!-- 查看投票结果页面 -->
<template>
  <div>
    <el-dialog
      title="投票结果"
      :visible.sync="showResultDialog"
      width="60%"
    >
      <div
        ref="chart"
        style="width: 800px; height: 400px; align-content: center;"
      ></div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showResultDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="showResultDialog = false"
        >确 定</el-button>
      </span>
    </el-dialog>

    <div class="cards">
      <vote-item
        v-for="(item, index) of voteData"
        :key="index"
        :id="item.voteId"
        :title="item.title"
        :image="item.image"
        :description="item.description"
        :duration="item.startTime + ' 至 ' + item.endTime"
        :operation="true"
        @showVoteResult="showVoteResult"
      ></vote-item>
    </div>
  </div>
</template>

<script>
import VoteItem from "@/components/VoteItem";
import * as echarts from "echarts";

export default {
  components: {
    VoteItem,
  },
  data() {
    return {
      showResultDialog: false,
      selectedId: 0,
      voteData: [],
      total: 0,
      resultData: [
        {
          id: 1,
          name: "初音",
          poll: 1010,
        },
        {
          id: 2,
          name: "洛天依",
          poll: 100,
        },
      ],
      allInfo: {
        page: 0,
        pageSize: 10,
        title: "",
      },
    };
  },
  methods: {
    showVoteResult(e) {
      this.selectedId = e;
      this.getResult(e);
      this.showResultDialog = true;
    },

    getAllVote() {
      this.$store
        .dispatch("vote/all", this.allInfo)
        .then((res) => {
          this.voteData = res.data;
          this.total = res.size;
        })
        .catch(() => {});
    },
    getResult(id) {
      this.$store
        .dispatch("vote/result", { id: id })
        .then((res) => {
          this.setBarChart(res);
        })
        .catch(() => {});
    },

    setBarChart(data) {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption({
        xAxis: {
          type: "category",
          data: data.map((item) => item.name),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.map((item) => item.votes),
            type: "bar",
          },
        ],
      });
    },
  },
  created() {
    this.getAllVote();
  },
};
</script>

<style scoped>
</style>